<template>
	<div class="decorate-showcase"
      :style="tplItemData.modulePadding || tplItemData.modulePadding ==0?'padding-top:'+tplItemData.modulePadding+'px;padding-bottom:'+tplItemData.modulePadding+'px;':'padding-top:5px;padding-bottom:5px;'" >
    <div :class="['showcase-layout',(tplItemData.layout!=2 && (tplItemData.isBorderRadius == 1 || !tplItemData.isBorderRadius))?'borderRadius':'',tplItemData.layout==2?'no-padding':'']">
      <!-- 2列 -->
      <section class="showcase-box col2"  :style="tplItemData.moduleHeight && tplItemData.moduleHeight >0 ? 'padding-top:'+tplItemData.moduleHeight+'%' :''" v-if="tplItemData.layout==0">
        <a href="javascript:;" @click="openLink(item.link)" :class="['con-img','img-'+(index+1)]" :style="item.pic ? `background-image:url('${item.pic }')` : ''" v-for="(item,index) in tplItemData.dataset" :key="index">
          <p class="info bdbox" v-if="item.showTitle==1">{{item.title}}</p>
        </a>
      </section>
      <!-- 3列 -->
       <div class="wrapper" v-else-if="tplItemData.layout==1">
        <section class="showcase-box col3">
          <a href="javascript:;" @click="openLink(item.link)" :class="['con-img','img-'+(index+1)]" v-for="(item,index) in tplItemData.dataset" :key="index">
            <div class="img-box">
              <img :src="item.pic" alt="">
            </div>
            <p class="info" v-if="item.showTitle==1">{{item.title}}</p>
          </a>
        </section>
      </div>

      <!-- 组合 -->
      <div class="wrapper" v-else-if="tplItemData.layout==2">
        <section class="showcase-box col-combination">
          <!-- <div class="col-combination-item <%if(content.isBorderRadius=="1" ||content.isBorderRadius == undefined){%>borderRadius<%}%>" style="background-color:<%=item.backgroundColor%>;" > -->
          <div :class="['col-combination-item',(tplItemData.isBorderRadius == 1 || !tplItemData.isBorderRadius)?'borderRadius':'']" :style="{backgroundColor:item.backgroundColor}" v-for="(item,index) in tplItemData.dataset" :key="index" v-if="index<2">
            <div class="title" :style="{color:item.titleColor,fontSize:item.fontSize}">{{item.title}}</div>
            <div class="img-box">
                <div class="img-item" v-for="(subItem,subIndex) in item.imgList" :key="subIndex">
                  <a @click="openLink(subItem.link)">
                    <img :src="subItem.pic" alt="">
                  </a>
                </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
</template>

<script>
import { openPage } from '@/utils/utils'
import Scroll from '@/components/scroll/index'
import Vue from 'vue'

export default Vue.extend({
  name: 'index',
  components: {
    Scroll
  },
  props: {
    tplItemData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  methods: {
    openLink(link){
      openPage(link)
    }
  },
  created() {
    // // console.log(this.tplItemData)
  }
})
</script>

<style lang="scss">
@import 'src/styles/mixin';
.decorate-showcase{
  .showcase-layout{
    background: #fff;
    padding: 25px;
    overflow: hidden;
    &.borderRadius{
      border-radius:12px;
      .showcase-box .con-img{
        border-radius: 10px;
      }
    }
    &.no-padding{
      padding:0;
    }
    .wrapper{
      overflow-x: scroll;
      -webkit-overflow-scrolling:touch;
      /*隐藏滚动条，当IE下溢出，仍然可以滚动*/
      -ms-overflow-style:none;
      /*火狐下隐藏滚动条*/
      overflow:-moz-scrollbars-none;
      // 谷歌
      &::-webkit-scrollbar{
        display:none;
      }
    }
  }
  .showcase-box{
    overflow: hidden;
    .con-img{
      overflow: hidden;
    }
    .info{
      position:absolute;
      left:0;
      bottom:0;
      width:100%;
      padding:0 25px;
      color:#fff;
      @include lineClamp(26px,50px,1);
      height: 50px;
      z-index:1;
      box-sizing: border-box;
      white-space:initial;
    }
    &.col2{
      position:relative;
      padding-top:100%;
      .con-img{
        display: block;
        position:absolute;
        width:calc(50% - 10px);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-color: #eee;
        &.img-1{
          top:0;
          left:0;
          height:100%;
          &.lazyload-ph{
            background-size:contain;
          }
        }
        &.img-2{
          top:0;
          right:0;
          height:calc(50% - 10px);
          img{
            width: 100%;
          }
        }
        &.img-3{
          right:0;
          bottom:0;
          height:calc(50% - 10px);
          img{
            width: 100%;
          }
        }
      }
      .info{
        @include gradient(right,rgba(242,18,40,0.9),rgba(242,18,40,0.1));
      }
    }
    &.col3{
      // display: inline-block;
      white-space: nowrap;
      overflow-x:auto;
      
      .con-img{
        display: inline-block;
        width:250px;
        position: relative;
        margin-right: 20px;
        .img-box{
          position: relative;
          padding-top: 100%;
          overflow: hidden;
          img{
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
          }
        }
        &:last-child{
          margin-right:0;
        }
        .info{
          background: rgba(0,0,0,0.5);
        }
      }
    }
    &.col-combination{
      display:flex;
      justify-content: space-between;
      .borderRadius{
        border-radius: 4px;
        background: #eaeaea;
      }
      .col-combination-item{
        width:calc((100% - 20px) / 2);
        padding:16px;
        box-sizing:border-box;
        background:#EAEAEA;
        &.borderradius{
          border-radius:4px;
        }
        .title{
          margin-bottom:16px;
          font-size:28px;
          line-height:40px;
          color:#333;
        }
      }
      .img-box{
        display:flex;
        justify-content: space-between;
        .img-item{
          width:calc((100% - 20px) / 2);
          img{
            display:block;
            width:100%;
            border-radius: 4px;
          }
        }
      }
    }
  }
}
</style>
